<template>
  <div class="menu">
    <!-- <div class="demo-inner-divider">
      水平的顶部导航菜单
    </div>
    <h3>通过设置属性 theme 为 light、dark、primary 可以选择主题。</h3>
    <div>
      <e-menu mode="horizontal" :theme="theme" active-name="1">
        <e-menu-item name="1">
          <e-icon type="Overview" />
          内容管理
        </e-menu-item>
        <e-menu-item name="2">
          <e-icon type="usergroup" />
          用户管理
        </e-menu-item>
        <e-submenu name="3">
          <template #title>
            <e-icon type="excel" />
            统计分析
          </template>
          <e-menu-group title="使用">
            <e-menuItem name="3-1">新增和启动</e-menuItem>
            <e-menuItem name="3-2">活跃分析</e-menuItem>
            <e-menuItem name="3-3">时段分析</e-menuItem>
          </e-menu-group>
          <e-menuGroup title="留存">
            <e-menuItem name="3-4">用户留存</e-menuItem>
            <e-menuItem name="3-5">流失用户</e-menuItem>
          </e-menuGroup>
        </e-submenu>
        <e-menuItem name="4">
          <e-icon type="share1" />
          综合设置
        </e-menuItem>
      </e-menu>
      <br />
      <p>Change theme</p>
      <e-radioGroup v-model="theme">
        <e-radio label="light"></e-radio>
        <e-radio label="dark"></e-radio>
        <e-radio label="primary"></e-radio>
      </e-radioGroup>
    </div> -->

    <div class="demo-inner-divider">
      垂直导航-无图标
    </div>
    <div>
      <e-menu :theme="theme" width="180" :header="header">
        <e-submenu name="1">
          <template #title>内容管理</template>
          <e-menuItem name="1-1">文章管理</e-menuItem>
          <e-menuItem name="1-2">评论管理</e-menuItem>
          <e-menuItem name="1-3">举报管理</e-menuItem>
        </e-submenu>
        <e-submenu name="2">
          <template #title>用户管理</template>
          <e-menuItem name="2-1">新增用户</e-menuItem>
          <e-menuItem name="2-2">活跃用户</e-menuItem>
        </e-submenu>
        <e-submenu name="3">
          <template #title>统计分析</template>
          <e-menuGroup title="使用">
            <e-menuItem name="3-1">新增和启动</e-menuItem>
            <e-menuItem name="3-2">活跃分析</e-menuItem>
            <e-menuItem name="3-3">时段分析</e-menuItem>
          </e-menuGroup>
          <e-menuGroup title="留存">
            <e-menuItem name="3-4">用户留存</e-menuItem>
            <e-menuItem name="3-5">流失用户</e-menuItem>
          </e-menuGroup>
        </e-submenu>
      </e-menu>
    </div>

    <div class="demo-inner-divider" style="marginTop: 100px">
      垂直导航-有图标
    </div>
    <div>
      <e-menu class="menu-icon" :theme="theme" width="180" :header="header">
        <e-submenu name="1">
          <template #title>
            <e-icon type="usergroup" size="18" />
            内容管理
          </template>
          <e-menuItem name="1-1">
            文章管理
            <e-icon type="skip" class="icon-skip" />
          </e-menuItem>
          <e-menuItem name="1-2">评论管理</e-menuItem>
          <e-menuItem name="1-3">举报管理</e-menuItem>
        </e-submenu>
        <e-submenu name="2">
          <template #title>
            <e-icon type="excel" size="18" />
            用户管理
          </template>
          <e-menuItem name="2-1">新增用户</e-menuItem>
          <e-menuItem name="2-2">活跃用户</e-menuItem>
        </e-submenu>
        <e-submenu name="3">
          <template #title>
            <e-icon type="share1" size="18" />
            统计分析
          </template>
          <e-menuGroup title="使用">
            <e-menuItem name="3-1">新增和启动</e-menuItem>
            <e-menuItem name="3-2">活跃分析</e-menuItem>
            <e-menuItem name="3-3">时段分析</e-menuItem>
          </e-menuGroup>
          <e-menuGroup title="留存">
            <e-menuItem name="3-4">用户留存</e-menuItem>
            <e-menuItem name="3-5">流失用户</e-menuItem>
          </e-menuGroup>
        </e-submenu>
      </e-menu>
    </div>

    <div class="demo-inner-divider" style="marginTop: 100px">可展开收起的导航</div>
    <div class="demo-inner-desc">仅适用于一级导航，且带有icon时展示效果最好，如下例。</div>
    <div>
      <div class="menu-icon-collpase">
        <e-menu
          :theme="theme"
          collapsible
          v-model="isExpand"
          :header="header"
        >
          <e-menuItem name="1">
            <e-icon type="usergroup" size="18" />
            内容管理
          </e-menuItem>
          <e-menuItem name="2">
            <e-icon type="excel" size="18" />
            评论管理
          </e-menuItem>
          <e-menuItem name="3">
            <e-icon type="share1" size="18" />
            举报管理
          </e-menuItem>
          <e-menuItem name="4">
            <e-icon type="warning-filled" size="18" color="red" />
            只能用
          </e-menuItem>
          <e-menuItem name="5">
            <e-icon type="warning-filled" size="18" color="red" />
            一级导航
          </e-menuItem>
        </e-menu>
      </div>
    </div>

    <div class="demo-inner-divider" style="marginTop: 100px">
      水平导航
    </div>
    <e-menu active-name="6-1" :accordion="true" mode="horizontal">
      <e-submenu name="1">
        <template #title>
          <e-icon type="Overview" />
          Navigation One
        </template>
        <e-menuGroup title="Item 1">
          <e-menuItem name="1-1">Option 1</e-menuItem>
          <e-menuItem name="1-2">Option 2</e-menuItem>
        </e-menuGroup>
        <e-menu-group title="Item 2">
          <e-menuItem name="1-3">Option 3</e-menuItem>
          <e-menuItem name="1-4">Option 4</e-menuItem>
        </e-menu-group>
      </e-submenu>
      <e-submenu name="2">
        <template #title>
          <e-icon type="a-setup" />
          Navigation Two
        </template>
        <e-menuItem name="2-1">Option 5</e-menuItem>
        <e-menuItem name="2-2">Option 6</e-menuItem>
        <e-submenu name="3">
          <template #title>Submenu</template>
          <e-menuItem name="3-1" to="//www.baidu.com" target="_blank">百度</e-menuItem>
          <e-menuItem name="3-2" to="./button">Option 8</e-menuItem>
        </e-submenu>
        <e-submenu name="5">
          <template #title>Submenu</template>
          <e-menuItem name="5-1">Option 7</e-menuItem>
          <e-menuItem name="5-2">Option 8</e-menuItem>
          <e-submenu name="8">
            <template #title>Submenu</template>
            <e-menuItem name="8-1">Option 7</e-menuItem>
            <e-menuItem name="8-2">Option 8</e-menuItem>
            <e-menuItem name="8-3">Option 7</e-menuItem>
          </e-submenu>
        </e-submenu>
      </e-submenu>
      <e-submenu name="4">
        <template #title>
          <e-icon type="notification" />
          Navigation Three
        </template>
        <e-menuItem name="4-1">Option 9</e-menuItem>
        <e-menuItem name="4-2">Option 10</e-menuItem>
        <e-menuItem name="4-3">Option 11</e-menuItem>
        <e-menuItem name="4-4">Option 12</e-menuItem>
      </e-submenu>
      <e-submenu name="6">
        <template #title>
          <e-icon type="attach" />
          产品名称
        </template>
        <e-menuItem name="6-1">产品1</e-menuItem>
        <e-menuItem name="6-2">产品2</e-menuItem>
        <e-menuItem name="6-3">产品3</e-menuItem>
        <e-menuItem name="6-4">产品4</e-menuItem>
        <e-submenu name="7">
          <template #title>
            <e-icon type="attach" />
            产品名称
          </template>
          <e-menuItem name="7-1">产品1</e-menuItem>
          <e-menuItem name="7-2">产品2</e-menuItem>
          <e-menuItem name="7-3">产品3</e-menuItem>
          <e-menuItem name="7-4">产品4</e-menuItem>
        </e-submenu>
      </e-submenu>
    </e-menu>

    <div class="demo-inner-divider" style="marginTop: 100px">
      :name为object
    </div>
    <e-menu :theme="'light'" width="auto" :activeName="navActive" @on-select="menuSelect">
      <e-menu-item :name="item" v-for="(item, index ) in menuItems" :key="index">
        {{ item.label }}
      </e-menu-item>
    </e-menu>

    <div class="demo-inner-divider" style="marginTop: 100px">基础用法</div>
    <e-menu active-name="6-1" width="200" :accordion="true" :open-names="['2', '3']">
      <e-submenu name="1">
        <template #title>
          <e-icon type="Overview" />
          Navigation One
        </template>
        <e-menuGroup title="Item 1">
          <e-menuItem name="1-1">Option 1</e-menuItem>
          <e-menuItem name="1-2">Option 2</e-menuItem>
        </e-menuGroup>
        <e-menu-group title="Item 2">
          <e-menuItem name="1-3">Option 3</e-menuItem>
          <e-menuItem name="1-4">Option 4</e-menuItem>
        </e-menu-group>
      </e-submenu>
      <e-submenu name="2">
        <template #title>
          <e-icon type="a-setup" />
          Navigation Two
        </template>
        <e-menuItem name="2-1">Option 5</e-menuItem>
        <e-menuItem name="2-2">Option 6</e-menuItem>
        <e-submenu name="3">
          <template #title><e-icon type="a-setup" />Submenu</template>
          <e-menuItem name="3-1" to="//www.baidu.com" target="_blank">百度</e-menuItem>
          <e-menuItem name="3-2" to="./button">Option 8</e-menuItem>
        </e-submenu>
        <e-submenu name="5">
          <template #title>Submenu</template>
          <e-menuItem name="5-1">Option 7</e-menuItem>
          <e-menuItem name="5-2">Option 8</e-menuItem>
        </e-submenu>
      </e-submenu>
      <e-submenu name="4">
        <template #title>
          <e-icon type="notification" />
          Navigation Three
        </template>
        <e-menuItem name="4-1">Option 9</e-menuItem>
        <e-menuItem name="4-2">Option 10</e-menuItem>
        <e-menuItem name="4-3">Option 11</e-menuItem>
        <e-menuItem name="4-4">Option 12</e-menuItem>
      </e-submenu>
      <e-submenu name="6">
        <template #title>
          <e-icon type="attach" />
          产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
        </template>
        <e-menuItem name="6-1">产品1</e-menuItem>
        <e-menuItem name="6-2">产品2</e-menuItem>
        <e-menuItem name="6-3">产品3</e-menuItem>
        <e-menuItem name="6-4">产品4</e-menuItem>
        <e-submenu name="7">
          <template #title>
            <e-icon type="attach" />
            产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
          </template>
          <e-menuItem name="7-1">产品1</e-menuItem>
          <e-menuItem name="7-2">产品2</e-menuItem>
          <e-menuItem name="7-3">产品3</e-menuItem>
          <e-menuItem name="7-4">产品4</e-menuItem>
        </e-submenu>
      </e-submenu>
    </e-menu>

    <menu-md class="markdown-body" style="marginTop:100px"></menu-md>
  </div>
</template>

<script>
import menuMd from '../../docs/menu.md'
export default {
  name: 'DemoMenu',
  data () {
    return {
      theme: 'light',
      header: '加了个标题',
      menuItems: [
        {
          name: "ProjectManage",
          label: "项目管理",
          iamgeUrl: "project-manage.svg",
          activeImageUrl: "project-manage-active.svg",
        },
        {
          name: "DataProcess",
          label: "数据处理器",
          iamgeUrl: "data-process.svg",
          activeImageUrl: "data-process-active.svg",
        },
        {
          name: "DataStore",
          label: "数据存储",
          iamgeUrl: "data-store.svg",
          activeImageUrl: "data-store-active.svg",
        },
      ],
      navActive: null,
      isScalaMenuItemsShow: false,
      isScalaDownMenuItemsShow: true,
      isScalaDownClick: false,
      isScalaUpClick: false,
      isExpand: true,
    }
  },
  methods: {
    menuSelect (item) {
      this.navActive.value = item.value;
    },
    scalaUp () {
      this.isScalaMenuItemsShow= true
      this.isScalaDownMenuItemsShow = false
    },
    scalaDown () {
      this.isScalaMenuItemsShow= false
      this.isScalaDownMenuItemsShow = true
    }
  },
  mounted () {
    this.navActive = this.menuItems[0];
  },
  components: {
    menuMd,
  },
}
</script>

<style lang="less" scoped>
.menu-icon {
  .haloe-menu {
    .haloe-menu-submenu-title > i {
      margin-right: 10px;
    }
  
    .haloe-menu-item {
      padding-left: 60px !important;
      .icon-skip {
        float: right;
        line-height: 18px;
      }
    }
  }
}

.menu-icon-collpase {
  height: 500px;
  .haloe-menu {
    .haloe-menu-item > i {
      margin-right: 10px;
    }
  }
}
</style>
